<template>
    <div>
      <h1>机构列表</h1>
      <div>
        机构名称:<input type="text" v-model="query.organname"/>
        特色服务:
                    <select v-model="query.servicename">
                        <option value="">请选择</option>
                        <option :value="item.serviceName" v-for="item in getservice">{{ item.serviceName }}</option>
                    </select>
        <input type="button" value="查询" class="btn btn-primary" @click="showw"/>
        <input type="button" value="批量发布" class="btn btn-info" @click="UpdateState(0)"/>
        <input type="button" value="批量撤销" class="btn btn-success" @click="UpdateState(1)"/>
      </div>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td>
              <input type="checkbox" v-model="all" @click="All"/>
            </td>
            <td>Id</td>
            <td>机构名称</td>
            <td>机构封面</td>
            <td>特色服务</td>
            <td>机构地址</td>
            <td>联系电话</td>
            <td>详情</td>
            <td>状态</td>
            <td>操作</td>
          </tr>
          <tr v-for="item in data.list">
            <td>
              <input type="checkbox" v-model="one" :value="item.institutionId" @change="One"/>
            </td>
            <td>{{item.institutionId}}</td>
            <td>{{ item.institutionName }}</td>
            <td><img :src="item.institutionImg" width="50px" height="70px"></td>
            <td>{{item.serviceName}}</td>
            <td>{{item.address}}</td>
            <td>{{item.phone.substring(0,3)+'****'+item.phone.substring(7)}}</td>
            <td>{{item.desc}}</td>
            <td>{{item.state==0?"发布":"未发布"}}</td>
            <td>
              <input type="button" value="删除" class="btn btn-danger" @click="del(item.institutionId)"/>
            </td>
          </tr>
        </tbody>
      </table>
      <div>
        <span>每页显示{{ query.pageSize }}条/共{{ data.totalPage }}条</span>
        <span>当前第{{ query.pageIndex }}页/共{{ data.totalCount }}页</span>
        <input type="button" value="首页" @click="Gopage(1)"/>
        <input type="button" value="上一页" @click="Gopage(query.pageIndex-1)"/>
        <span v-for="item in data.totalPage" @click="Gopage(item)">{{ item }}</span>
        <input type="button" value="下一页" @click="Gopage(query.pageIndex+1)"/>
        <input type="button" value="尾页" @click="Gopage(data.totalPage)"/>
      </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();

let query:any=reactive
({
  pageIndex:1,
  pageSize:3,
  organname:'',
  servicename:''
})
let data:any=reactive
({
  totalCount:'',
  totalPage:'',
  list:[]
})

onMounted(()=>{
  showservice();
  showlist();
})

let getservice:any=ref([])
const showservice=()=>
{
    axios
    ({
        url:'/api/Organ/ShowService',
        method:'get'
    })
    .then(res=>{
        console.log(res);
        getservice.value=res.data;
    })
    .catch(err=>{

    })
}


const showw=()=>
{
  query.pageIndex=1;
  showlist();
}
//显示机构列表
const showlist=()=>
{
  axios
    ({
        url:'/api/Organ/ShowOrgan',
        method:'get',
        params:query
    })
    .then(res=>{
        Object.assign(data,res.data);
    })
    .catch(err=>{

    })
}
//分页
const Gopage=(num:any)=>
{
    if(num<1)
    {
      query.pageIndex=1;
      return;
    }
    if(num>data.totalPage)
    {
      query.pageIndex=data.totalPage;
      return;
    }
    query.pageIndex=num;
    showlist();
}
//删除
const del=(id:any)=>
{
  let f=confirm("确认删除吗?")
  {
    if(f)
    {
       axios
       ({
        url:'/api/Organ/OrganDelete',
        method:'delete',
        params:
        {
          id:id
        }
       })
       .then(res=>{
        if(res.data>0)
        {
         alert("删除成功");
         showlist();
         return;
        }
        else
        {
          alert("删除失败");
          return;
        }
       })
       .catch(err=>{

       })
    }
  }
}

let all=ref(false);
let one=ref([])

const All=()=>
{
  all.value=!all.value;
  if(all.value==true)
  {
     one.value=data.list.map((item:any)=>{
      return item.institutionId;
     })
  }
  else
  {
    one.value=[];
  }
}

const One=()=>
{
  if(one.value.length==data.list.length)
  {
     all.value=true;
     return;
  }
  else
  {
    all.value=false;
    return;
  }
}


const UpdateState=(state:any)=>
{
  axios
  ({
    url:'/api/Organ/UpdateState',
    method:'put',
    params:
    {
      ids:one.value.toString(),
      state:state
    }
  })
  .then(res=>{
    if(res.data>0)
    {
      alert("修改成功");
      all.value=false;
      one.value=[];
      showlist();
      return;
    }
    else
    {
      alert("修改失败");
      all.value=false;
      one.value=[];
      return;
    }
  })
  .catch(er=>{

  })
}



</script>

<style scoped>
span
{
  margin: 0 10px;
}
input
{
  margin: 0 10px;
}
</style>